﻿<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<!--2:引入>eCharts在线文件-->
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
		function fun(max,min){
			var min = document.getElementById("min").value;
			var max = document.getElementById("max").value;
  			var arr=[];
			var arr1 = [];
			for(i=0;i<10;i++){
  				arr[i]=Math.floor(Math.random()*(max-min+1)+min);
  				arr1[i]=Math.floor(Math.random()*(max-min+1)+min);
  			}

			document.getElementById("text").value=arr;
			var b = [].concat(arr1);
			for(var i=0;i<arr.length;i++){
				for(var j = i + 1;j<arr.length;j++){
					if(arr[i]>arr[j]){
						var tmp = arr[i];
						arr[i] = arr[j];
						arr[j] = tmp;
					}
				}
			}
			arr.splice(0,2);
			arr.splice(arr.length-2,2);
			arr.splice(parseInt(arr.length/2)+1,1);
  			document.getElementById("text1").value=arr;
			var str = "<table border='1'>";
			for(i=1; i<=b.length;i++){
				if(i>5){
					arr[i-1]=null;
				}
				str += "<tr><td>"+i+"</td>"+"<td>"+arr[i-1]+"</td>"+"<td>"+arr1[i-1]+"</td></tr>";


			};
			str +="</table>";
			document.getElementById("div1").innerHTML = str;
		 //3:配置所需图表的路径-
		require.config({
			paths:{
				echarts:'http://echarts.baidu.com/build/dist'
			}
		});
		require(
				[
					'echarts',
					'echarts/chart/bar' //pie-圆环图；bar-柱状图
				],
				//5：基于准备好的dom对象，初始化图表
				function(ec){
					var myChart = ec.init(document.getElementById('chart'));
					//6:复制开始
					option = {
						title : {
							text: '表格',
							subtext: '15个随机数'
						},
						tooltip : {
							trigger: 'axis'
						},
						legend: {
							data:['随机数表格']
						},
						toolbox: {
							show : true,
							feature : {
								mark : {show: true},
								dataView : {show: true, readOnly: false},
								magicType : {show: true, type: ['line', 'bar']},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},
						calculable : true,
						xAxis : [
							{
								type : 'category',
								data : ['1','2','3','4','5','6','7','8','9','10']
							}
						],
						yAxis : [
							{
								type : 'value'
							}
						],
						series : [
							{
								name:'随机数值',
								type:'bar',
								data:[b[0], b[1], b[2], b[3], b[4], b[5], b[6],b[7],b[8],b[9]],
								markPoint : {
									data : [
										{type : 'max', name: '最大值'},
										{type : 'min', name: '最小值'}
									]
								},
								markLine : {
									data : [
										{type : 'average', name: '平均值'}
									]
								}
							}
						]
					};

					//（复制结束）
					//最后：为eCharts对象加载数据
					myChart.setOption(option);
				}
		);
		}
	</script>
	<style>
		body{width: 800px;margin: 20px auto;border: 1px solid #2b542c;border-radius: 20px;padding: 20px;box-shadow: 5px 5px 5px #ccc;}
		button{float: right;border: 1px solid #000000;border-radius: 5px;font-size: 16px;margin: -70px 200px 0 0;
			background-color: #5bc0de;padding: 8px 4px;color: black;font-weight: bold;box-shadow: 5px 5px 5px #ccc;}
		textarea{resize: none;width: 300px;height: 80px;margin-bottom: 60px;}
		input{box-shadow: 5px 5px 5px #ccc;border: 1px solid #000000;height: 20px;line-height: 30px;width: 200px;}
		p{text-shadow: 2px 2px 5px #ccc;margin: 0}
		#div1{width: 200px;height: 306px;float: right;margin-top:-215px;margin-right: 100px;
			border: 1px dashed #000000; border-radius: 5px;}
	</style>
</head>
<body>
<p>请输入最小值:<input type="text" id="min"></p><br>
<p>请输入最大值:<input type="text" id="max"></p><br>
<button onclick="fun()">生成随机数</button><br>
	 <p>生成随机数</p>
	<textarea id="text"></textarea>
  	 <p>整理排序后</p>
	<textarea id="text1"></textarea>
<div id='div1'>
</div>
<!--1:为eCharts准备一个具有大小的盒子-->
<div id="chart" style="width:650px; height: 400px"></div>
</body>
</html>